<template>
 <div class="mainContent">
   <div class="ifame">
     <img src="@/assets/ball.png" class="ball">
     <div class="roll_warp">
       <img src="@/assets/roll.png" class="rollFlag">
     </div>
   </div>

 </div>
</template>

<script setup>
import {onMounted} from "vue";

  // 设计稿基准宽度（根据实际需求修改）
  const designWidth = 1920

  // 设置根字体大小
  function setRootFontSize() {
  const clientWidth = document.documentElement.clientWidth
  const fontSize = (clientWidth / designWidth) * 100
  document.documentElement.style.fontSize = fontSize + 'px'
}

  // 初始化执行
  setRootFontSize()

  onMounted(() => {
    window.addEventListener("resize", function() {
      setRootFontSize()
      location.reload()
    });
  })
</script>

<style scoped>
 .mainContent{
   overflow: hidden;
   position: relative;
   width: 100vw;
   height: 100vh;
   background:  url("@/assets/bg.jpg") no-repeat 100%;
   background-size: 100% 100%;
 }
 .ifame{
   width: 100%;
   height: 100%;
   margin: 0 auto;
   position: relative;
 }
 .ball{
   width: 17.06rem;
   height: 17.06rem;
   position: absolute;
   left: 1.2rem;
   top: -1.45rem;
   z-index: 1;
 }
 .roll_warp{
   width: 17.06rem;
   height: 8.5rem;
   position: absolute;
   left: 1.2rem;
   top: -1.45rem;
   z-index: 1;
 }
.rollFlag{
  width: 17.06rem;
  height: 17.06rem;
  animation: rotate 8s linear infinite;
}

 /* 定义旋转动画关键帧 */
 @keyframes rotate {
   0% {
     transform: rotate(0);
     opacity: 1;
   }
   12% {
     opacity: 1;
   }
   15% {
     opacity: .25;
   }
   25% {
     opacity: 0;
   }
   70% {
     opacity: 0;
   }
   90% {
     opacity: 1;
   }
   100% {
     transform: rotate(1turn);
     opacity: 1;
   }
 }
</style>